<template>
	<div class="work-hour-manage">
		<el-card>
			<template #header>
				<div class="header-bar">
					<span>工时管理</span>
					<el-button type="primary" size="small" @click="openDialog('add')">新增工时记录</el-button>
				</div>
			</template>

			<!-- 搜索栏 -->
			<el-form :inline="true" :model="filters" class="mb-2">
				<el-form-item label="工序编码">
					<el-input v-model="filters.process" />
				</el-form-item>
				<el-form-item label="工人名称">
					<el-input v-model="filters.worker" />
				</el-form-item>
				<el-form-item label="报工时间">
					<el-date-picker v-model="filters.range" type="daterange" range-separator="至"
						start-placeholder="开始时间" end-placeholder="结束时间" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary">搜索</el-button>
					<el-button @click="reset">重置</el-button>
					<!-- 工时统计 -->
					<div class="stat-footer">
						<span class="stat-label human">人工工时合计：</span>
						<b class="stat-value human">{{ totalHuman }}</b>，
						<span class="stat-label machine">设备工时合计：</span>
						<b class="stat-value machine">{{ totalMachine }}</b>
					</div>
				</el-form-item>

			</el-form>

			<!-- 表格 -->
			<el-table :data="filteredList" border stripe>
				<el-table-column prop="station" label="工作站编号" width="120" />
				<el-table-column prop="worker" label="工人名称" width="100" />
				<el-table-column prop="time" label="报工时间" width="160" />
				<el-table-column prop="workshop" label="车间编号" width="100" />
				<el-table-column prop="device" label="设备编号" width="100" />
				<el-table-column prop="process" label="工序编码" width="100" />
				<el-table-column prop="human" label="人工工时" width="100" />
				<el-table-column prop="machine" label="设备工时" width="100" />
				<el-table-column prop="type" label="工时类型" width="100" />
				<el-table-column label="操作" width="140">
					<template #default="scope">
						<el-button size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="confirmDelete(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

		</el-card>

		<!-- 编辑弹窗 -->
		<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="工作站编号"><el-input v-model="form.station" /></el-form-item>
				<el-form-item label="工人名称"><el-input v-model="form.worker" /></el-form-item>
				<el-form-item label="报工时间"><el-date-picker v-model="form.time" type="datetime"
						style="width: 100%;" /></el-form-item>
				<el-form-item label="车间编号"><el-input v-model="form.workshop" /></el-form-item>
				<el-form-item label="设备编号"><el-input v-model="form.device" /></el-form-item>
				<el-form-item label="工序编码"><el-input v-model="form.process" /></el-form-item>
				<el-form-item label="人工工时"><el-input-number v-model="form.human" :min="0" /></el-form-item>
				<el-form-item label="设备工时"><el-input-number v-model="form.machine" :min="0" /></el-form-item>
				<el-form-item label="工时类型">
					<el-select v-model="form.type">
						<el-option label="正常" value="正常" />
						<el-option label="加班" value="加班" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

// 初始化数据
const list = ref(
	[...Array(15)].map((_, i) => ({
		station: `ST-${100 + i}`,
		worker: ['张三', '李四', '王五'][i % 3],
		time: dayjs().subtract(i, 'day').format('YYYY-MM-DD HH:mm'),
		workshop: `WS-${i % 5 + 1}`,
		device: `EQ-${i + 1}`,
		process: `GX-${200 + i}`,
		human: 4 + (i % 3),
		machine: 3 + (i % 2),
		type: i % 4 === 0 ? '加班' : '正常'
	}))
)

const filters = ref({ process: '', worker: '', range: '' })

const filteredList = computed(() => {
	const f = filters.value
	return list.value.filter(i =>
		(!f.process || i.process.includes(f.process)) &&
		(!f.worker || i.worker.includes(f.worker)) &&
		(!f.range || (dayjs(i.time).isAfter(f.range[0]) && dayjs(i.time).isBefore(f.range[1])))
	)
})

const totalHuman = computed(() =>
	filteredList.value.reduce((sum, i) => sum + Number(i.human), 0)
)

const totalMachine = computed(() =>
	filteredList.value.reduce((sum, i) => sum + Number(i.machine), 0)
)

const reset = () => {
	filters.value = { process: '', worker: '', range: '' }
}

// 弹窗逻辑
const dialogVisible = ref(false)
const dialogTitle = ref('')
const form = ref({})
const currentIndex = ref(-1)

const openDialog = (type, row = null) => {
	dialogTitle.value = type === 'add' ? '新增工时记录' : '编辑工时记录'
	dialogVisible.value = true
	if (type === 'edit') {
		form.value = { ...row }
		currentIndex.value = list.value.findIndex(i => i.station === row.station && i.time === row.time)
	} else {
		form.value = {
			station: '', worker: '', time: dayjs().format('YYYY-MM-DD HH:mm'),
			workshop: '', device: '', process: '',
			human: 0, machine: 0, type: '正常'
		}
		currentIndex.value = -1
	}
}

const submitForm = () => {
	const formatted = { ...form.value, time: dayjs(form.value.time).format('YYYY-MM-DD HH:mm') }
	if (currentIndex.value >= 0) {
		list.value[currentIndex.value] = formatted
	} else {
		list.value.push(formatted)
	}
	dialogVisible.value = false
}

const confirmDelete = (index) => {
	const item = list.value[index]
	list.value.splice(index, 1)
}
</script>

<style scoped>
.work-hour-manage {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}

.mb-2 {
	margin-bottom: 16px;
}

.stat-footer {
	margin-top: 12px;
	font-weight: bold;
	font-size: 14px;
	text-align: right;
}
.stat-label.human,
.stat-value.human {
	color: #e74c3c;
	/* 红色 */
}

.stat-label.machine,
.stat-value.machine {
	color: #3498db;
	/* 蓝色 */
}
</style>
  
